<%-- 
    Document   : Q350
    Created on : Jul 3, 2012, 3:13:36 PM
    Author     : VANANH
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <!-- -->
        <link rel="stylesheet" type="text/css" href="../css/popup.css"/>  
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/kapi.js"></script>
        <script type="text/javascript" language="javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                $j('.item_head_care').live('click',function(){
                    var fq300 =$j(this).attr('lang');
                    var fq350 = $j(this).attr('title');
                   
                    $j('.item_content_care').slideUp();
                    if($j(this).next().hasClass('active')){

                        $j('.item_content_care').removeClass('active');
                    }else{

                        $j('.item_content_care').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().slideDown();
                    }
                    $j.post('listQ300Detail.jsp?pq350='+fq350+'&fq300='+fq300,function(data){
                        if(data !=null){
                            // alert(fq350);
                            $j('.item_content_care'+fq300).html(data);//
                            // alert($j(this).attr('class'));
                        }
                    });
                });
                
           
                $j('.actioncontact').live('click',function(){
                    var fq350 = $j(this).find('.items_n550').attr('lang') ;
                   
                    $j('.contact_show_detail').slideUp();
                    if($j(this).next().hasClass('active')){

                        $j('.contact_show_detail').removeClass('active');
                    }else{

                        $j('.contact_show_detail').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().slideDown();
                    }
                    $j.post('showDetailQ350.jsp?action=detailq350&pq350='+fq350,function(data){
                        if(data !=null){
                            // alert(fq350);
                            $j('.contact_show_detail'+fq350).html(data);//
                            // alert($j(this).attr('class'));
                        }
                    });
                });
           
            
            });
        </script>   
    </head>
    <style>
                #main{
            width: 100%;
            
        }
        #content{
            width: 98%;
            padding: 0;
            margin-left: 1%;
        }
        #footer{
            width: 100%;
        }
        .contact {
            cursor: pointer;
        }
        .content{
            background: none repeat scroll 0 0 #FFFFFF;
            height: 400px;
            padding:0 4px 30px;
            width: 920px;
            height: 600px !important;
        }
        .search_box1{
            margin-top: 7px;
        }
        .list_content .contact{
            background: none repeat scroll 0 0 #E8E8E8;
            float: left;
            margin-bottom: 10px;
            margin-left: -5px;
            margin-top: 0 !important;
            overflow: hidden;
            padding: 4px;
            position: relative;
            width: 100% !important;
        }
        .list_content .contact-header{

            float: left;
            margin-bottom: 6px;
            margin-left: -4px;
            margin-top: -15px !important;
            overflow: hidden;
            padding: 4px;
            position: relative;
            width: -moz-available !important;
            z-index: 2;
        }

        .list_content .contact-pass .items{
            margin-top: 3px;
            width: 280px;
            float:left;
        }

        .list_content .contact-header .items{
            margin-top: 10px;
            width: 280px;
            float:left;
        }
        .list_content .contact .items{
            margin-top: 10px;
            width: 280px;
            float:left;
        }
        .list_content .contact .action{
            margin-top: 10px;
        }
        .list_content .contact-pass .action{
            margin-bottom: 3px;
            margin-top: 3px;
        }
        .list_content .items{
            margin-top: 10px;
            width: 500px;
        }
        .list_content .header{
            background-color: #566575;

            float: left;
            height: 30px;
            margin-bottom: 10px;
            margin-left: -4px;
            margin-top: -4px !important;
            width: 101%;
        }
        .list_content .action{
            margin-bottom: 7px;
        }
        .list_content .action label{

        }
        .list_content .action img{
            float: left;
            height: 15px;
            margin-right: 4px;
            width: 15px;
        }
        .list_content .header label{
            color: white;
            float: left;
            font-size: 13px;
            font-weight: bold;
            margin-left: 1px;
            margin-top: 6px;
            text-align: center;
        }
        .list_content .action-form{
            float:right;
            margin-right: 4px;
        }
        .list_content .contact .content-myprofile{
            margin-top: -8px;
        }
        .list_content .contact .content-myprofile .items{
            float: left;
            margin-top: 10px;
            width: 280px;
        }
        .list_content .items .action{
            margin-left: 108px;
        }
        .list_content .items label{
            float: left;
            margin-right: 3px;
            text-align: right;
            width: 100px;

        }
        .list_content .items span{
            font-size: 12px;
            font-weight: bold;
            color: #506172;
        }
        .list_content .items_n550 span{
            font-size: 12px;
            font-weight: bold;
            color: #506172;
        }


        .comment-content {
            background: none repeat scroll 0 0 #CFCFCF;

            border: 1px solid #7F9FBE;
            float: left;
            margin-bottom: 10px;
            margin-left: 3px;
            margin-top: 0 !important;
            min-height: auto;
            overflow: hidden;
            padding: 4px;
            position: relative;
            width: 98% !important;
            z-index: 2;
        }

        .qa{
            min-height: 312px !important;
        }
        .edit_delete{
            margin-left: 582px;
            margin-top: 1px !important;
            position: relative;
        }
        .contact .profile-rigth{
            float: left;
            width: 280px;
            margin-bottom: 8px;
            margin-top: -19px
        }
        .contact .profile-rigth .items{
            width: 278px;
            float: left;
        }
        .contact .profile-rigth .items label{
            width: 100px;
        }
        .contact .profile-left{
            width: 280px;
            float: left;
            margin-bottom: 8px;
            margin-top: -19px
        }
        .contact .profile-left .items{
            width: 278px;
            float: left;

        }
        .contact .profile-left .items label{
            width: 100px;
        }
        .contact .contact-content{
            margin-bottom: 29px;
            margin-top: -15px;
        }
        .contact .contact-content .content-personal{
            float: left;
            margin-left: 21px;
            margin-top: 5px;
            width:100%;
        }
        .contact .contact-content .content-personal .items{
            float: left;
            margin-bottom: 5px;
            margin-top: 16px;
            width: 166px;
        }
        .contact .contact-content .content-personal .items_n550{
            float: left;
            margin-bottom: 5px;
            margin-top: 16px;
            width: 269px;
        }
        .contact .contact-content .content-personal .item_n550 label{

            float: left;
            margin-right: 6px;
            width: 3px;
        }

        .contact .contact-content .content-personal .item_n550 span{
            font-size: 12px;
            font-weight: bold;
            color: #506172;
        }
        .contact .contact-content .content-personal .items1{
            float: left;
            margin-left: -27px;
            margin-top: 16px;
            width: 118px;
        }
        .contact .contact-content .content-personal .items-action{
            float: right;
            margin-right: 25px;
            margin-top: 16px;
            width: 68px;
        }
        .contact .contact-content .content-personal .items-action-n550{
            float: right;
            margin-right: 13px;
            margin-top: 16px;
            width: 100px;
        }
        .contact .contact-content .content-personal .items1 span{
            font-size: 12px;
            font-weight: bold;
            color: #506172;
        }
        .contact .contact-content .content-personal .items label{

            float: left;
            margin-right: 6px;
            width: 3px;
        }
        .more{
            color: #0055A6;
            cursor: pointer;
        }
        .more:hover{
            color: #0055A6;
        }
        .search{
            float: right;
        }
        .search:hover{

        }
         .items-action-n550{
            
        }
    </style>
    <body>
        <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
        <h:outputText value="<div class='permission' lang='#{loginSession.right.MNU_SPQ_VIE}'></div>" escape="false"/>
        <f:view>
            <a4j:form>
                <div id="content">
                    <div id="content_detail">
                        <div class="content">
                            <div class="contact">
                                <%-- Khach Hang --%>
                                <div class="list_content comment-content">
                                    <div class="header"> <label>  <h:outputText value="#{locale.group_right}"/></label></div>
                                    <div class="header-item">
                                        <div class="action">
                                            <h:panelGroup rendered="#{loginSession.right.SPQ_LST_CRE}">
                                                <a href="editQ350.jsp?action=add&table=setting&height=236px&width=405px" class="fancybox add_new" id="fancybox">
                                                    <img src="../images/add_tab.png" alt="add" title="add" /> <h:outputText value="#{locale.group_right}"/> </label>
                                                </a>
                                            </h:panelGroup>
                                        </div> 
                                        <a4j:repeat value="#{q350Controller.listQ350All}" var="item"> 
                                            <div class="contact actioncontact">

                                                <div class="contact-content">
                                                    <div class="content-personal">
                                                        
                                                        <div class="items_n550 " lang="<h:outputText value="#{item.pq350}"/>">
                                                            <label> &nbsp </label>
                                                            <span><h:outputText value="#{item.qv351}"/></span> 
                                                        </div>

                                                        <div class="items-action-n550" lang="<h:outputText value="#{item.pq350}"/>">
                                                            <h:outputLink rendered="#{loginSession.right.SPQ_LST_GRP}" value="q275.jsp?pq350=#{item.pq350}&height=300px&width=500px" styleClass="fancybox" id="group2">
                                                                <img src="../images/permission.png" width="20px" height="20px" alt="" title="group"/>
                                                            </h:outputLink>
                                                            <h:outputLink rendered="#{loginSession.right.SPQ_LST_PER}" value="groupPermission.jsp?pq350=#{item.pq350}&height=300px&width=500px" styleClass="fancybox" id="group">
                                                                <img src="../images/intro.png" alt="Tổ/Nhóm" title="group"/>
                                                            </h:outputLink>
                                                            <h:outputLink rendered="#{loginSession.right.SPQ_LST_MOD}" value="editQ350.jsp?action=edit&pq350=#{item.pq350}&height=300px&width=500px" styleClass="fancybox">
                                                                <img src="../images/edit.png" alt="edit" title="edit"/>
                                                            </h:outputLink>
                                                            <h:outputLink rendered="#{loginSession.right.SPQ_LST_DEL}" value="delete.jsp?id=#{item.pq350}&flag=Q350&height=150px&width=300px" styleClass="fancybox">
                                                                <img src="../images/delete_1.png" alt="delete"  title="delete" />
                                                            </h:outputLink>

                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                                             <div class="contact_show_detail<h:outputText value="#{item.pq350}"/> contact_show_detail"></div>
                                        </a4j:repeat>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
                <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                 height="30" width="40" zindex="2000">
                    <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                </rich:modalPanel>
            </a4j:form>
        </f:view>

    </body>
</html>
